<template>
  <!-- 榜单 -->
  <div class="ranking" v-if="rankingList.length !== 0">
    <div class="item" v-for="item in rankingList" :key="item.id">
      <div class="pic_box">
        <img
          v-lazy="item.coverImgUrl"
          alt=""
          class="pic"
          @click="rankingListPicClick(item)"
        />
        <div class="icon_box">
          <span class="rangking_name" @click="rankingListPicClick(item)">{{
            item.name
          }}</span>
          <p>
            <span class="icon" style="margin-right: 15px"></span>
            <span class="icon"></span>
          </p>
        </div>
      </div>

      <div class="song_list">
        <div
          class="song"
          v-for="(value, index) in item.tracks"
          :key="value.first"
        >
          <span
            :style="{
              color: judgeColor(index + 1),
              width: '70px',
              textAlign: 'center',
            }"
            >{{ index + 1 }}</span
          >
          <span class="song_name">{{ value.first }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "Ranking",
  props: {
    rankingList: {
      type: Array,
      default: () => {
        return [];
      },
      require: true,
    },
  },
  setup(props, context) {
    // 榜单前三首歌曲排列的颜色分别
    let judgeColor = (index) => {
      if (index == 1) {
        return "#c90d0c";
      } else if (index == 2) {
        return "#c10d0c";
      } else {
        return "#c20d0c";
      }
    };

    // 排行榜图片点击事件
    let rankingListPicClick = (item) => {
      context.emit("rankingListPicClick", item);
    };

    return {
      judgeColor,
      rankingListPicClick,
    };
  },
});
</script>
<style scoped>
.ranking {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
.item {
  width: 33.333%;
}
.pic_box {
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 50px;
}

.pic {
  width: 120px;
  height: 120px;
  cursor: pointer;
}

.icon_box {
  margin-left: 15px;
}

.rangking_name {
  margin-bottom: 10px;
  color: #222;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
}
.icon {
  padding-top: 10px;
  font-size: 18px;
  color: #777;
  cursor: pointer;
  transition: all 0.3s;
}
.icon:hover {
  color: #c90d0c;
}

.song {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}
.song_name {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #222;
  font-size: 16px;
  cursor: pointer;
}
.song_name:hover {
  text-decoration: underline;
}
</style>
